﻿@model EasyStep.Data.Entities.TestConstList
@{
	ViewBag.Title = Model.Name;
	Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/jQuery.tmpl.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/site.main.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.comboBox.js")" type="text/javascript"></script>
<h2>@Html.ActionLink(@Model.Project.Name, "Details", new {controller="TestProject", id = @Model.ProjectId })
	&gt;
	@Html.ActionLink("Constants", "Index",  new { project = @Model.ProjectId })
	&gt;
	@Html.ActionLink(@Model.Name, "Edit",  new {id=@Model.Id, project = @Model.ProjectId })
	</h2>
<p>
	<input type="button" name="Add" value="Add New" class="btnAddNew ui-button ui-corner-all" id="btnAddNew" />
	<input type="button" name="Save" value="Save Changes" class="btnSaveAll ui-button ui-corner-all" id="btnSaveAll" />
</p>

<ul class="round accordion const-list">
	@foreach (var item in Model.Constants)
	{
		<li class="const-li" id="@item.Id">
			<h3>
				<span class="headertext"><span class="item-name">@item.Name</span><small class="item-value">@item.Value</small><span class="item-info"><!-- --></span>
				<input class="hdnId" name="Id" value="@item.Id" type="hidden" />
                <input class="hdnName" name="Name" value="@item.Name" type="hidden" />
                <input class="hdnValue" name="Value" value="@item.Value" type="hidden" />
                </span>
			</h3>
			<div class="editor">
				<!-- -->
			</div>
		</li>
	}
</ul>

<div id="new-item-template" class="template">
	<li class="const-li new-item">
		<h3>
			<span class="headertext"><span class="item-name">${Name}</span><small class="item-value">${Value}</small><span class="item-info"><!-- --></span>
			    <input class="hdnId" name="Id" value="${Id}" type="hidden" />
                <input class="hdnName" name="Name" value="${Name}" type="hidden" />
                <input class="hdnValue" name="Value" value="${Value}" type="hidden" />
            </span>
		</h3>
		<div class="editor">
			<!-- -->
		</div>
	</li>
</div>
<div id="item-edit-template" class="template">
	<div class="const-editor">
		<fieldset>
			<legend>-</legend>
			<div class="editor-label">Constant Name</div>
			<div class="editor-field"><input type="text" name="Name" value="${Name}" id="Name" /></div>
			<div class="editor-label">Constant Value</div>
			<div class="editor-field"><input type="text" name="Value" value="${Value}" id="Value" /></div>
			<p>
				<span>
					<input type="button" value="Save" class="ui-button ui-corner-all savebtn" /></span>
				<span>
					<input type="button" value="Delete" class="ui-button ui-corner-all deletebtn" /></span>
			</p>
		</fieldset>
	</div>
</div>
<script type="text/javascript">
	jQuery(document).ready(function () {
		var el=$('.accordion');
		var newItemTmpl=$("#new-item-template li");
		var newBtn=$(".btnAddNew");
		newBtn.click(function(){
			var active = el.accordion( "option", "active" );
			el.accordion("destroy");			
			var nel=$("<div/>").append(newItemTmpl.clone()).tmpl({Name:"new constant name", Value:"constant value"});
			if (active>-1)
                nel.insertAfter($(el.find("li")[active]));
			else
				nel.appendTo(el);
            ReinitAccordion(el, active+1);
		});
        ReinitAccordion(el, 0);
	});


    function ReinitAccordion(el, showNodeIndex)
    {        
        InitAccordion(el,showNodeIndex,EditCurItem,function(){//on no elements
			newBtn.trigger("click");
		},function(event,ui){//on items been re-ordered
            
        },function(event,ui){//on validate and save
            
        });
    }


	
	function ExecuteItemAction(ui,el, actionUrl, callBack) {
		if (!ui.oldHeader.hasClass("edited")) return;
		//data to post
		var header=ui.oldHeader;
		var dataToPost = ui.oldContent.serializeJSON();
		dataToPost.Id = header.parent().attr("id");
	   
	   //call back
		var loader=$("<span class=\"loader\"><!-- --></span>");
		loader.css({"float":"right"}).appendTo(header);
		header.removeClass("save-error");
		defaultCallBack=function(isOk,a){
			loader.remove();
			header.removeClass("edited");
			if (typeof(callBack)==="function") return callBack(isOk,a,dataToPost);
			if (!isOk)
				header.addClass("save-error");
			else if (dataToPost.ListId!='@Model.Id')
				header.parent().remove();
			else{
				header.find(".const-name").html(dataToPost.Name);
				header.find(".const-value").html(dataToPost.Value);
			}            
		};
		//saving
		$.ajax({
			type: 'POST',
			url: actionUrl,
			data: dataToPost,
			success: function(){defaultCallBack(true,arguments);},
			error:function(){defaultCallBack(false,arguments);},
			dataType: 'json'
		});
	}

	function EditCurItem(ui,el)
	{
		var header=ui.newHeader;
		var newContent=ui.newContent;
		newContent.html('');
		var data={Name:header.find(".const-name").html(),Value:header.find(".const-value").html() };
		
		var tmplItem=$("#item-edit-template").tmpl(data);
		tmplItem.appendTo(newContent);
		tmplItem.find(".savebtn").click(function(){
			ExecuteItemAction({oldHeader:header, oldContent:newContent},el,"@Url.Action("Edit", "TestConst")");
		}); 

		tmplItem.find(".deletebtn").click(function(){
			ExecuteItemAction({oldHeader:header, oldContent:newContent},el,"@Url.Action("Delete", "TestConst")");
		});
	}
</script>
